/**
 * 学习目标：React样式处理- 两种方式
 * 1. 行内样式
 * 2. 外部样式
 *  2.1 新建样式文件
 *  2.2 导入样式文件
 *  2.3 分配类名
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './base.css';

const title = 123;

const divNode = (
  <div>
    {/* 行内样式 */}
    {/* 语法:  style={{css属性名: 属性值}} */}
    {/* 注意:  
      💥 属性名不推荐使用连字符, 如👎 "font-size", 👍 fontSize
      💥 单位为px时, 可以省略为数字
    */}
    <div style={{ color: 'red', fontSize: 50 }}>红色文字, 大小50px {title}</div>
    <div className="box">我是外部样式控制的样式</div>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
